<template>
  <!--答题时间设置-->
  <a-card style='margin-top: 50px;'>
    
    <a-popover placement='topLeft'>
      <template slot='content'>
        <!--录取文字-->
        <a-result title='设置效果展示' status='success'>
          
          <div class='content'>
            <a-row class='row-i' style='width: 38vw;'>
              <a-col :xs='24' :sm='12' :md='12' :lg='12' :xl='6' style='margin-right: 150px;'>
                <span
                  style='color: rgba(0, 0, 0, 0.85)'>题目评分负责人<a> {{ $store.state.user.name || '你的名字'
                  }}</a></span>
              </a-col>
              <a-col>
                <span
                  style='color: rgba(0, 0, 0, 0.85);display: inline-block'>
                  二轮面试时间 {{ secondRoundInfo.date }} ({{ secondRoundInfo.start }}-{{ secondRoundInfo.end }})
                  <br>
                  二轮面试地点 {{ secondRoundInfo.location }}
                </span>
              </a-col>
            </a-row>
            
            
            <a-steps :current='1'>
              <a-step :title="'评分通过'">
              </a-step>
              <a-step :title="'二轮面试'">
              </a-step>
            </a-steps>
          </div>
        
        </a-result>
      </template>
      <span slot='title'>
        设置效果如下
      </span>
      <a-divider orientation='left'>二轮招新时间地点设置</a-divider>
    </a-popover>
    
    <a-form
      layout='inline'
      :form='form'
      @submit='handleSubmit'>
      
      <a-alert
        :message="'当前系统设置的二轮招新时间为 [ '+
        secondRoundInfo.date + ' ' +
        secondRoundInfo.start  + ' 至 ' +
        secondRoundInfo.end + ' ]  地点为 ' +
        secondRoundInfo.location"
        type='info'
        show-icon
        style='margin-bottom: 18px;' />
      
      
      <a-form-item label='日期' style='margin-left: 20px;'>
        <a-date-picker
          style='width: 100%;'
          v-decorator="['date', { rules: [{ required: true, message: '日期不能为空' }] },]"
        />
      </a-form-item>
      
      <a-form-item label='开始时间'>
        <a-time-picker
          style='width: 100%;'
          v-decorator="['start', { rules: [{ required: true, message: '开始时间不能为空' }] },]"
          :open='open'
          placeholder='开始时间'
          @openChange='handleOpenChange'>
          <div slot='addon'>
            <a-tag color='pink'>格式: HH:mm:ss</a-tag>
            <a-button
              style='border-radius: 10px;margin-right: 5px;'
              size='small'
              type='primary'
              @click='handleClose'>
              确认
            </a-button>
          </div>
        </a-time-picker>
      
      </a-form-item>
      
      <a-form-item label='结束时间'>
        <a-time-picker
          style='width: 100%;'
          v-decorator="['end', { rules: [{ required: true, message: '结束时间不能为空' }] },]"
          :open='open2'
          placeholder='结束时间'
          @openChange='handleOpenChange2'>
          <div slot='addon'>
            <a-tag color='pink'>格式: HH:mm:ss</a-tag>
            <a-button
              style='border-radius: 10px;margin-right: 5px;'
              size='small'
              type='primary'
              @click='handleClose'>
              确认
            </a-button>
          </div>
        </a-time-picker>
      </a-form-item>
      
      <a-form-item label='面试地点设置'>
        <a-input
          placeholder='请输入二轮面试的地点'
          v-decorator="['location', { rules: [{ required: true, message: '二轮招新地点不能为空' }] },]">
        
        </a-input>
      </a-form-item>
      
      <a-form-item>
        <a-space>
          <a-button @click='() => this.form.resetFields()'>重置</a-button>
          <a-button type='primary'
                    @click='showConfirm'
                    :loading='loading'>确认
          </a-button>
        </a-space>
      </a-form-item>
    
    </a-form>
    
    <a-divider></a-divider>
  
  
  </a-card>
</template>

<script>
import moment from 'moment/moment'
import { getSecondRoundInfo, setSecondRoundInfo } from '@/api/systemConfig'

export default {
  name: 'SecondRound',
  data() {
    return {
      open: false,
      open2: false,
      loading: false,
      form: this.$form.createForm(this, { name: 'date' }),
      secondRoundInfo: {
        date: '2023-10-26',
        start: '9:00:00',
        end: '18:00:00',
        location: 'S1-706'
      }
    }
  },
  created() {
    this.getSecondRoundInfo()
  },
  methods: {
    showConfirm() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let fieldsValue = this.form.getFieldsValue()
          // 取出参数
          let date = moment(fieldsValue.date).format('YYYY-MM-DD')
          let start = moment(fieldsValue.start).format('HH:mm:ss')
          let end = moment(fieldsValue.end).format('HH:mm:ss')
          let location = fieldsValue.location
  
          let than = this
          this.$confirm({
            title: '确认修改时间和地点',
            width: 500,
            content: h =>
              <div style='color:red;'>
            <span>
              时间:&nbsp;&nbsp; {date} {start} &nbsp;&nbsp;至&nbsp;&nbsp;  {date} {end}
            </span>
                <br />
                <span>
              地点:&nbsp;&nbsp; {location}
            </span>
              </div>,
            onOk() {
              than.handleSubmit()
            },
            onCancel() {
            },
            class: 'test'
          })
        }
      })
    },
    handleSubmit() {
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          values.date = moment(values.date).format('YYYY-MM-DD').valueOf()
          values.start = moment(values.start).format('HH:mm:ss').valueOf()
          values.end = moment(values.end).format('HH:mm:ss').valueOf()
          let curTime = moment().format('YYYY-MM-DD').valueOf()
          if (curTime > values.date) {
            this.openNotificationWithIcon('error', '错误提醒', '设置的日期不能小于当前天')
            return
          }
          if (values.start >= values.end) {
            this.openNotificationWithIcon('error', '错误提醒', '结束时间不能小于开始时间')
            return
          }
          // 设置二轮面试信息
          setSecondRoundInfo(values).then(response => {
            this.$message.success(response.msg)
            this.getSecondRoundInfo()
          })
        }
      })
      this.loading = false
    },
    
    // 获取二轮面试信息
    getSecondRoundInfo() {
      getSecondRoundInfo().then(response => {
        this.secondRoundInfo = response.data
      })
    },
    moment,
    handleOpenChange(open) {
      this.open = open
    },
    handleOpenChange2(open2) {
      this.open2 = open2
    },
    handleClose() {
      this.open = false
      this.open2 = false
    },
    openNotificationWithIcon(type, message, description) {
      this.$notification[type]({
        message,
        description
      })
    }
  }
}
</script>

<style scoped lang='less'>
.content {
  .info {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    margin-bottom: 20px;
  }
  
  .row-i {
    margin-bottom: 16px
  }
  
  .step-desc {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    position: relative;
    left: 42px;
    text-align: left;
  }
}
</style>